<template>
  <div class="PowerSurveyfooter">
    <div class="footerlittle">
      <div class="gongkuangtitle">
        <div class="title">逆变器工况</div>
        <div>在线率：{{ (+bili)?.toFixed(2)}} % </div>
      </div>
      <div class="gongkuang">
        <div class="littlibian" v-for="(item,index) in xunhuanlist" :key="index">
          <div class="imgandname">
            <div class="imgbox"><img src="../../../../assets/Photovoltaic/libianqi.png" alt=""> </div>
            <div>{{ item.name }}</div>
          </div>
          <div class="status">
            <div class="icon">
              <i v-if="item.status=='2'" style="color: red;" class="iconfont icon-lixian11"></i>
              <i v-else-if="item.status=='3'" style="color: #f2bd42;font-size: 18px;" class="iconfont icon-gaojing"></i>
              <i v-else style="color: #1afa29;" class="iconfont icon-zhengchang"></i>
            </div>
            <div>{{ item.status=='1'?'正常':item.status=='2'?'离线':'告警' }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 发电效率 -->
    <div class="footerlittle">
      <div class="title">发电效率</div>
      <div class="bongandzhu">
        <div class="piebox" ref="piexiaolv"></div>
        <div class="barbox" ref="barxiaolv"></div>
      </div>
    </div>
    <!-- 消纳率 -->
    <div class="footerlittle" >
      <div class="title">消纳率</div>
      <div class="xiaonalv" ref="xiaonalv"></div>
    </div>
  </div>
</template>

<script>
import {getxiaonagouchengapi} from '@/api/Photovoltaic/analysis/Consumption'
import {getlibianandxiaoapi} from '@/api/Photovoltaic/SystemHeught/PhotovoSurvey'
import * as echarts from 'echarts';
export default {
  name: 'CallPoliceMiddle',
  props: ['companyId'],
  data() {
    return {
      xunhuanlist: [],
      bili:''
    };
  },

  mounted() {

  },

  methods: {
    async getecharts() {
      this.getxiaonalv()
      const { data: { list, content } } = await getlibianandxiaoapi({ classId: this.companyId })
      const arr = list.filter(ele => ele.status == '1')
      this.bili = arr.length / list.length * 100
      this.xunhuanlist = list
      this.getdianzhanxiaolv(JSON.parse(content))
      this.gettongbiechart(list)
    },
    // 获取消纳率图表
    async getxiaonalv() {
      var chartDom = this.$refs.xiaonalv
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const { data: { list } } = await getxiaonagouchengapi({
        classId:this.companyId,dateString:year+'-'+month,dateType:'2'
      })
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      option = {
        color:['#5087ec','#68bbc4','#58a55c'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '2%',
          right: '1%',
          top:'15%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
          },
          {
            type: 'value',
            name: '',
          }
        ],
        series: [
          {
            name: '上网电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='上网电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '自用电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='自用电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '消纳率',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: list.filter(ele=>ele.name=='消纳率')[0].datalist.map(ele=>ele.valueReading)
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 获取电站效率图表
    getdianzhanxiaolv(val) {
      var chartDom = this.$refs.piexiaolv
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      var fourPieData = [
        {
          name: "电站效率",
          max: val.stationCapacity,
          value: val.totalPower,
        }
      ];
      console.log(val);
      var titleArr = [],
        seriesArr = [];
      let colors = [

        ["#b8e412", "#f4f4f7"],
      ];
      fourPieData.forEach(function(item, index) {
        titleArr.push({
          text: item.name,
          left: '50%',
          top: '90%',
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "16",
            color: colors[index][0],
            textAlign: "center",
          },
        });

        seriesArr.push({
          name: item.name,
          type: "pie",
          clockWise: false,
          radius: ['50%', '70%'],

          itemStyle: {
            normal: {
              color: colors[index][0],
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {
                show: true,
              },
              labelLine: {
                show: true,
              },
            },
          },
          hoverAnimation: false,
          center: ['50%','45%'],
          data: [
            {
              value: item.value,
              name: "电站效率",
              label: {
                normal: {
                  formatter: function(params) {
                    let num = (val.totalPower/val.stationCapacity * 100)?.toFixed(2);
                    return num+'%'
                  },
                  rich: {
                    a: {
                      color: "#000",
                      fontWeight: 500,
                      fontSize: 18,
                      lineHeight: 20,
                      align: "center",
                    },
                    b: {
                      color: "#000",
                      fontSize: 14,
                    },
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: colors[index][0], //跟随其他颜色
                  },
                },
              },
              itemStyle: {
                emphasis: {
                  color: colors[index][0],
                },
              },
            },
            {
              value: item.max - item.value,
              name: "总额",
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: colors[index][1],
                },
              },
            },
          ],
        });
      });
      option = {
          title: titleArr,
              series: seriesArr,
              tooltip: {
                trigger: "item",
                formatter: "{b}<br> {c}",
              },
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    gettongbiechart(list) {
      var chartDom = this.$refs.barxiaolv
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const sortedTimePoints = list.map(ele => ele.name)
      const sortedList=list.map(ele=>ele.power)
      option = {
        color:['#b8e412'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: sortedTimePoints
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: sortedList,
            label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                      color: '#b8e412' // 设置数值的颜色为红色
                  }
              }
          }
        ]
      }

      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
  },
};
</script>

<style scoped>
.PowerSurveyfooter{
  height: 100%;
  display: flex;
  justify-content: space-between;
    .footerlittle{
      width: calc(33.33% - 7px);
      background-color: #fff;
      border-radius: 10px;
      padding: 15px;
      .title{
        font-weight: bold;
      }
      .bongandzhu{
        display: flex;
        height: 90%;
        .piebox{
          width: 40%;
          height: 100%;
        }
        .barbox{
          height: 100%;
          width: 60%;
        }
      }
      .xiaonalv{
        height: 90%;
      }
      .gongkuangtitle{
        display: flex;
        justify-content: space-between;
      }
      .gongkuang{
        height: 90%;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        overflow: auto;
        .littlibian{
          height: 75px;

          width: 31%;
          border: 1px solid #bbbbbb;
          border-radius: 5px;
          margin: 5px;
          padding: 7px;
          display: flex;
          .imgandname{
            width: 60%;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .imgbox{
              width: 40px;
              height: 40px;
              img{
                width: 40px;
                height: 40px;
              }
            }
          }
          .status{
            width: 40%;
            font-size: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .icon{
              height: 40px;
              line-height: 40px;
            }
          }
        }
      }
    }
}
</style>